<template>
	<ul class="list">
		<li class="item" v-for='item in letters' 
		:key='item'
		:ref='item' 
		@click='handleLetterClick' 
		@touchstart='handleTouchStart' 
		@touchmove='handleTouchMove' 
		@touchend='handleTouchEnd'>{{ item }}</li>
	</ul>
</template>

<script>
	export default{
		name: 'CityAlphabet',
		props:{
			cities:Object
		},
		data () {
			return {
				touchStatus:false,
				startY:0,
				timer:null
			}
		},
		updated () {
			this.startY = this.$refs['A'][0].offsetTop
		},
		computed:{
			letters () {
				const letters = []
				for(let i in this.cities){
					letters.push(i)
				}
				return letters
			}
		},
		methods:{
			handleLetterClick (e) {
				this.$emit('change',e.target.innerText)
				// console.log(e.target.innerText)
			},
			handleTouchStart () {
				this.touchStatus = true
			},
			//（手指距离顶端高度-A字母距离顶端高度）/字母高度=哪个字母
			handleTouchMove (e) {
				if(this.touchStatus)
				{
					//函数节流，降低move函数执行的次数，提高网页性能
					if (this.timer) {
						clearTimeout(this.timer)
					}
					this.timer = setTimeout(()=>{
					const touchY = e.touches[0].clientY - 79
					const index = Math.floor((touchY-startY)/20)
					// console.log(index)
					if(index >= 0 && index < this.letters.length)
						{
							this.$emit('change',this.letters[index])
						}
					},16)
				}
			},
			handleTouchEnd() {
				this.touchStatus = false
			}
		}
	}
</script>

<style lang= 'stylus' scoped>
	@import '~@/assets/styles/varibles.styl'
	.list
		display:flex
		flex-direction:column
		justify-content:center
		position:absolute
		// background:red
		top:1.58rem
		right:0
		bottom:0
		width:.4rem
		.item
			text-align:center
			line-height:.4rem
			color:$bgColor
</style>